{% extends "index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">
	
	heads={{ heads | jsonify }}
	row = {{ row | jsonify }}

	errors={}

	$(function () {
		new Vue({
			el:'#there',
			data:{
				kw:{
					heads:heads,
			        row:row,
			   		errors:errors,
				},
				menu:menu,
				can_save:false,
				can_delete:false,
				can_log:false,
			},
			methods:{
				submit:function () {
					var self =this;
					show_upload()
					var search =parseSearch(location.search)
					var post_data=[{fun:'save',row:this.kw.row}]
					$.post('',JSON.stringify(post_data),function (data) {
						if(data.msg){
							hide_upload()
							return
						}
						if(data.save && data.save.errors){
							self.kw.errors = data.save.errors
							hide_upload()
						}else if(search._pop==1){
							if(window.opener.on_subwin_close){
								window.opener.on_subwin_close({pk:data.save.pk,_class:data.save._class})
							}
							window.close()
						}else if(search.next){
							location=atob(search.next)
						}else{
							setTimeout(function () {
								hide_upload()
							}, 2000);
						}
						
					})
				},
				cancel:function () {
					var search =parseSearch(location.search)
					if(search.next){
						location=atob(search.next)
					}
				},
				del_row:function () {
					if(!confirm('真的删除吗?'))
						return
					var obj={
						pk:this.kw.row.pk,
						_class:this.kw.row._class
					}
					var obj_str=JSON.stringify([obj])
					var path = '{% url "del_rows" %}'
					location=ex.template('{path}?rows={rows}&next={next}',{path:path,
																rows:btoa(obj_str),
																next:btoa(location.pathname)})
				}
			},
			mounted:function () {
				var self=this
				var ls = row._class.split('.')
				var app_label=ls[0]
				var model_name=ls[1]
				var post_data=[{fun:'model_perm',perm:'can_add',model:row._class,_rt_key:'can_save'},
								{fun:'model_perm',perm:'can_del',model:row._class,_rt_key:'can_delete'},
								{fun:'model_perm',perm:'can_log',model:row._class,_rt_key:'can_log'}]
				$.post('',JSON.stringify(post_data),function (data) {
					self.can_save=data.can_save
					self.can_delete=data.can_delete
					self.can_log=data.can_log
				})
			}
		})
	})
</script>

<div id='there'>

	<div style='float: right;padding: 5px 20px;'>
		<a href="ss">History</a>
	</div>
	<path-nav :menu='menu'>
		<li><span>编辑</span></li>
	</path-nav>
	
	<div style='overflow: hidden;'>
		<div class="btn-group" style='float: right;'>
			<button type="button" class="btn btn-default" @click='submit()' v-if='can_save'>Save</button>
			<button type="button" class="btn btn-default" v-if='can_delete' @click='del_row()'>删除</button>
			<button type="button" class="btn btn-default" @click='cancel()' >Cancel</button>
		</div>
	</div>
	

	<div class='field-panel'>
		
		<field  v-for='head in kw.heads' :name='head.name' :kw='kw'></field>
		<div class='field-inn'></div>
	</div>
</div>
<style type="text/css" media="screen" id="test">

	.field-panel{
		background-color: #F5F5F5;
		max-width:80%;
		margin: 20px;
		padding: 20px 30px;
		border-radius:6px;
		position: relative;
		border: 1px solid #D9D9D9;
	}
	.field-inn{
		position: absolute;
		top:0px;
		left:0px;
		bottom:0px;
		width:180px;
		border-radius:6px;
		background-color: #fff;
		z-index:0;
	}
	.error{
    	color: red;
	}
	
	.form-group.field .control-label{
		vertical-align: top;
		position: relative;
		width:150px;
		text-align: right;
		padding:5px 30px;
		/*background-color: #fff;*/
		z-index:100;
		
		border-top: 1px solid #EEE;
	}
	.field-panel .field:first-child .control-label{
		border-top: 5px solid #FFF;
	}
	.form-group.field .field_input{
		display: inline-block;
		width:350px;
		padding:5px 20px;
	}
	
	.form-group.field .field_input ._tow-col-sel{
		width:750px;
	}
	._tow-col-sel .sel {
    	width: 350px;
	}
	.field.error .error{
		display: inline-block;
	}
	
</style>
{% endblock %}